<template>
    <el-popover
        ref="popoverRef"
        :visible="state.visible"
        :virtual-ref="state.virtualRef"
        virtual-triggering
        :width="260"
        v-bind="$attrs"
    >
        <slot></slot>
    </el-popover>
</template>

<script setup>
import { onClickOutside } from '@vueuse/core'
import { computed, reactive, ref, toRef, useAttrs } from 'vue'

defineOptions({
    name: 'BaseVirtualPopover',
    inheritAttrs: false
})

const popoverRef = ref()
const popoverContentRef = computed(() => {
    return popoverRef.value?.popperRef?.contentRef
})

const props = defineProps({

})

const attrs = useAttrs()

const emit = defineEmits(['clickOutside'])

const state = reactive({
    virtualRef: null,
    visible: false
})

const popoverVirtualRef = toRef(state, 'virtualRef')

onClickOutside(popoverVirtualRef, () => {
    Object.assign(state, {
        visible: false
    })
    emit('clickOutside')
}, {
    ignore: [popoverContentRef]
})

const init = data => {
    Object.assign(state, {
        visible: !state.visible,
        ...data
    })
}

defineExpose({
    popoverRef,
    popoverContentRef,
    state,
    popoverVirtualRef,
    init
})

</script>

<style lang="scss" scoped>

</style>